.box-margin {
  margin: 4px;
  padding: 1.6rem 2rem;
  color: #333;
  background-color: rgb(243, 230, 186);
  border: 2px dashed rgb(243, 157, 59);
}
.box-padding {
  padding: 1.6rem 2rem;
  background-color: #b4a9dd;
}
.box-border {
  padding: 5px;
  background-color: #5f5b5b;
}
.box-content {
  text-align: center;
  background-color: #a9c3dd;
  border: 2px dashed #628beb;
}
.box-padding,
.box-border,
.box-margin {
  position: relative;
}
.box-padding > span,
.box-border > span,
.box-margin > span {
  position: absolute;
}
.box-margin > span:first-child {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.box-margin > span:nth-child(2) {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.box-margin > span:nth-child(3) {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.box-margin > span:nth-child(4) {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
.box-padding > span:first-child {
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
}
.box-padding > span:nth-child(2) {
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.box-padding > span:nth-child(3) {
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}
.box-padding > span:nth-child(4) {
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
.box-border > span {
  padding: 2px;
  color: #fff;
  border-radius: 3px;
  line-height: 1rem;
  background-color: #5f5b5b;
  z-index: 1;
}
.box-border > span:first-child {
  left: 50%;
  top: 2.5px;
  transform: translate(-50%, -50%);
}
.box-border > span:nth-child(2) {
  top: 50%;
  right: 2.5px;
  transform: translate(50%, -50%);
}
.box-border > span:nth-child(3) {
  left: 50%;
  bottom: 2.5px;
  transform: translate(-50%, 50%);
}
.box-border > span:nth-child(4) {
  top: 50%;
  left: 2.5px;
  transform: translate(-50%, -50%);
}
